<template>
	<div class="FlipClock">
		<Flipper ref="flipperHour1" />
		<Flipper ref="flipperHour2" />
		<em>:</em>
		<Flipper ref="flipperMinute1" />
		<Flipper ref="flipperMinute2" />
		<em>:</em>
		<Flipper ref="flipperSecond1" />
		<Flipper ref="flipperSecond2" />
	</div>
</template>

<script>
	import Flipper from './FlipperCom'
	import ElMessage from 'element-plus'
	import { getTimeStamp, record, realtimeApi } from '../apis/exampleApi'
	export default {
		name: 'FlipClock',
		data() {
			return {
				timer: null,
				flipObjs: [],
				timestamp: null,
				tempMin: 0,
				tempHour: 0,
				timeCalculationStr: '000000',
				isTip: false,
				isF: false,
			}
		},
		props: {
			hour: {
				type: String,
				default: '24',
			},
		},
		components: {
			Flipper,
		},
		methods: {
			// 初始化数字
			init() {
				getTimeStamp({ index: this.$store.state.index })
					.then((res) => {
						const timestamp =
							res.data.timestamp == null ? null : res.data.timestamp

						if (timestamp !== null) {
							// 时间戳不为0

							console.log(timestamp)

							var timeCalculationStr = this.timeCalculation(timestamp)
							this.timeCalculationStr = timeCalculationStr
							console.log(timeCalculationStr)

							this.timestamp = timestamp

							this.flipObjs[0].setFront(timeCalculationStr.substr(0, 2)[0])
							this.flipObjs[1].setFront(timeCalculationStr.substr(0, 2)[1])
							this.flipObjs[2].setFront(timeCalculationStr.substr(2, 2)[0])
							this.flipObjs[3].setFront(timeCalculationStr.substr(2, 2)[1])
							this.flipObjs[4].setFront(timeCalculationStr.substr(4, 2)[0])
							this.flipObjs[5].setFront(timeCalculationStr.substr(4, 2)[1])

							// 设定倒数时间大于间隔时间小时数

							// // 设定倒数时间大于间隔时间小时数
						} else {
							// 初始化设为hour小时
							this.flipObjs[0].setFront(this.hour.split('')[0])
							this.flipObjs[1].setFront(parseInt(this.hour.split('')[1]))
							this.$message.closeAll()
							this.$message({
								message: '已成功设置翻堆时间为' + this.hour + '小时',
								type: 'success',
							})
						}
					})
					.catch((err) => {
						console.log(err)
					})
			},
			// 开始倒计时
			run() {
				this.init()
				this.timer = setInterval(() => {
					if (this.timestamp != null) {
						var nowTimeStr = this.timeCalculation(this.timestamp)
						var nextTimeStr = this.timeCalculation(parseInt(this.timestamp) - 1)

						for (let i = 0; i < this.flipObjs.length; i++) {
							if (nowTimeStr[i] === nextTimeStr[i]) {
								continue
							}
							this.flipObjs[i].flipDown(nowTimeStr[i], nextTimeStr[i])
						}
						this.isF = true
					}
				}, 1000)
			},
			setZero() {
				record({
					timestamp: null,
					index: this.$store.state.index,
				})
					.then((res) => {
						console.log(res)
					})
					.catch((err) => {
						console.log(err)
					})
				clearInterval(this.timer)
				this.timer = null
				this.timestamp = null
				this.isF = false
				setTimeout(() => {
					for (let i = 0; i < this.flipObjs.length; i++) {
						this.flipObjs[i].flipDown('6', '0')
					}
					this.timeCalculationStr = '000000'
				}, 500)
			},
			// 相差时间
			timeCalculation(timestamp) {
				if (timestamp == null) {
					return '000000'
				}

				var nowTime = Math.round(+new Date() / 1000) + 1 //返回当前时间总的秒数
				var res = parseInt(timestamp) - nowTime //剩余时间总的秒数

				if (res > 0) {
					var d = parseInt(res / 60 / 60 / 24) //天
					var h = parseInt(((res / 60 / 60) % 24) + d * 24) //时
					h = h < 10 ? '0' + h : h
					var m = parseInt((res / 60) % 60) //分
					m = m < 10 ? '0' + m : m
					var s = parseInt(res % 60) //秒
					s = s < 10 ? '0' + s : s
					return h + '' + m + '' + s
				} else if (res < 0) {
					this.isTip = true
					return '000000'
				}
			},
		},
		mounted() {
			this.flipObjs = [
				this.$refs.flipperHour1,
				this.$refs.flipperHour2,
				this.$refs.flipperMinute1,
				this.$refs.flipperMinute2,
				this.$refs.flipperSecond1,
				this.$refs.flipperSecond2,
			]
		},
		watch: {
			isTip() {
				if (this.isTip) {
					this.$message.closeAll()
					this.$message({
						message: '翻堆时间已经到了哦',
						type: 'warning',
					})
				}
			},
		},
	}
</script>

<style>
	.FlipClock {
		text-align: center;
	}
	.FlipClock .M-Flipper {
		margin: 0 3px;
	}
	.FlipClock em {
		display: inline-block;
		line-height: 102px;
		font-size: 66px;
		font-style: normal;
		vertical-align: top;
	}
</style>
